<template>
  <div class="chart-wrapper">
    <div class="top">
      <div class="title-wrapper">
        <div class="title">退款审批</div>
      </div>
    </div>
    <div class="middle">
      <Input ref="searchInput" placeholder="请输入用户名/手机号" class="input-cls" @search="handleSearch" />
      <el-button
        v-for="(item, index) of buttonList"
        :key="index"
        :class="{ 'active': isActive == index }"
        @click="buttonClick(index)"
      >{{ item }}</el-button>
    </div>
    <div class="bottom">
      <component :is="cmpName" :list="list" @success="handleSuccess" />
    </div>
    <Pagination class="pagination" :total="total" :page-size="pageSize" :cur-page="currentPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Input from '@/common/input'
import TableList from './refund/tableList'
import WillPay from './refund/willPay'
import PayMent from './refund/payment'
import Refuse from './refund/refuse'
import Pagination from '@/common/pagination'
import { getRefundList } from '@/api/represent'
const ERR_OK = 200
export default {
  components: {
    Input,
    Pagination
  },
  data() {
    return {
      buttonList: ['待审批', '待打款', '已打款', '已拒绝'],
      cmpName: TableList,
      isActive: 0,
      list: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      query: ''
    }
  },
  created() {
    this._getRefundList({ page: this.currentPage, status: 1 })
  },
  methods: {
    handleSuccess() {
      this.currentPage = 1
      switch (this.cmpName) {
        case TableList:
          this._getRefundList({ page: this.currentPage, status: 1, keyword: this.query })
          break
        case WillPay:
          this._getRefundList({ page: this.currentPage, status: 2, keyword: this.query })
          break
        case PayMent:
          this._getRefundList({ page: this.currentPage, status: 3, keyword: this.query })
          break
        case Refuse:
          this._getRefundList({ page: this.currentPage, status: 4, keyword: this.query })
          break
      }
    },
    buttonClick(index) {
      this.isActive = index
      this.list = []
      switch (index) {
        case 0:
          this.cmpName = TableList
          this._getRefundList({ page: this.currentPage, status: 1, keyword: this.query })
          break
        case 1:
          this.cmpName = WillPay
          this._getRefundList({ page: this.currentPage, status: 2, keyword: this.query })
          break
        case 2:
          this.cmpName = PayMent
          this._getRefundList({ page: this.currentPage, status: 3, keyword: this.query })
          break
        case 3:
          this.cmpName = Refuse
          this._getRefundList({ page: this.currentPage, status: 4, keyword: this.query })
          break
      }
    },
    handleNextPage(page) {
      this.currentPage = page
      switch (this.cmpName) {
        case TableList:
          this._getRefundList({ page: this.currentPage, status: 1, keyword: this.query })
          break
        case WillPay:
          this._getRefundList({ page: this.currentPage, status: 2, keyword: this.query })
          break
        case PayMent:
          this._getRefundList({ page: this.currentPage, status: 3, keyword: this.query })
          break
        case Refuse:
          this._getRefundList({ page: this.currentPage, status: 4, keyword: this.query })
          break
      }
    },
    handleSearch(query) {
      this.query = query
      this.currentPage = 1
      this.$refs.searchInput.clear()
      switch (this.cmpName) {
        case TableList:
          this._getRefundList({ page: this.currentPage, status: 1, keyword: this.query })
          break
        case WillPay:
          this._getRefundList({ page: this.currentPage, status: 2, keyword: this.query })
          break
        case PayMent:
          this._getRefundList({ page: this.currentPage, status: 3, keyword: this.query })
          break
        case Refuse:
          this._getRefundList({ page: this.currentPage, status: 4, keyword: this.query })
          break
      }
    },
    _getRefundList({ page, status, keyword }) {
      getRefundList({ page, status, keyword })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.list
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import '@/styles/el-pagination.scss';
.el-button {
  background: #ffff;
  height: 40px;
  &.active {
    background-color: rgba(64, 158, 255, 1);
    color: #fff;
  }
}
.chart-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
  .middle {
    display: flex;
    align-items: center;
    .input-cls {
      margin-right: 36px;
    }
  }
  .bottom{
    margin-top: 20px;
  }
}
</style>
